<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="myFunc()">这是第二种弹出框</button>
    <p id="out"></p>
    <button onclick="myFunc2()">这是第三种弹出框</button>
    <p id="out2"></p>
    <script>
        //第一种
        alert("第一种:\nHello World");
        //第二种
        function myFunc() {
            var txt;
            var r = confirm("第二种:\n选择选项");
            if (r == true) {
                txt = "你选了ok";
            } else {
                txt = "你选了no";
            }
            document.getElementById("out").innerHTML = txt;
        }

        function myFunc2() {
            var name = prompt("第三种:\n请输入你的名字", "Someone");
            if (name != null && name != "") {
                document.getElementById("out2").innerHTML = "翻斗花园第一自由人" + name;
            } else {
                document.getElementById("out2").innerHTML = "用户取消了提示!";
            }
        }
    </script>
</body>

</html>